<template>
  <basic-container>
    <div class="df" style="margin-bottom: 25px;">
      <div class="block">
        <span class="demonstration">结算申请日期：</span>
        <el-date-picker v-model="value1" type="daterange" range-separator="~" :start-placeholder=oldData
          :end-placeholder=newData size="mini" format="yyyy-MM-dd" >
        </el-date-picker>
      </div>
      <div class="block">
        <span>状态：</span>
        <el-select v-model="form1.status" placeholder="请选择" size="mini" :clearable="true">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="search" size="small">查询</el-button>
    </div>
    <el-button v-if="userInfo.role_name.includes('distribution')" type="primary" style="margin: 0px 0px 25px ;" size="small"  @click="Change([])">申请结算</el-button>
    <el-table :data="tableData" style="width: 100%;height: 530px;" size="mini">
      <el-table-column label="结算单号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.billNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="配送企业" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.companyName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结算药品总数" width="200">
        <template slot-scope="scope">
            <span>{{ scope.row.totalMedicineCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结算总金额(元)" width="200" prop="totalFee">
      </el-table-column>
      <el-table-column label="状态" width="200">
        <template slot-scope="scope">
          <el-tag size="mini" :type="typec(scope)" plain disabled>{{ scope.row.label }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="结算申请日期" width="200">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" v-if="userInfo.role_name.includes('distribution')"
            @click="Change(scope.row)" size="mini">修改</el-button>
          <el-popconfirm style="margin: 0 10px;" title="请确认是否删除"
            @confirm="handleDelete(scope.row.id)" class="ml10">
            <el-button slot="reference" v-if="userInfo.role_name.includes('distribution')" size="mini">删除</el-button>
          </el-popconfirm>
          <el-button type="primary"  @click="ChangeDetail(scope.row,-1)"
           size="mini">详情</el-button>
          <el-button type="primary"  @click="toSend(scope.row)"
          size="mini" v-if="userInfo.role_name.includes('medical')&&scope.row.status==1">结算确认</el-button>
          <el-button type="primary"  @click="toSend(scope.row)"
          v-if="userInfo.role_name.includes('cityAdmin')&&scope.row.status==2||userInfo.role_name.includes('districtAdmin')&&scope.row.status==2" size="mini">确认一致性</el-button>
          <el-button type="primary"  @click="toSend(scope.row)"
          v-if="userInfo.role_name.includes('cityAdmin')&&scope.row.status==3||userInfo.role_name.includes('districtAdmin')&&scope.row.status==3" size="mini">支付待确认</el-button>
          <el-button type="primary"  @click="toSend(scope.row)"
          size="mini" v-if="userInfo.role_name.includes('medical')&&scope.row.status==4">确认核实</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 20px 0;margin-left: 75%;">
      <el-pagination background 
        :current-page="form1.current" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="Size"
        :page-sizes="[10, 20, 30, 40]">
      </el-pagination>
    </div>
    <el-dialog  v-if="dialogVisible2" :width="dialogScreen?'': '1500px'" :visible.sync="dialogVisible2" append-to-body :fullscreen="dialogScreen" :class="[dialogScreen ? 'fullscreen' : 'no_fullscreen']" :beforeClose="changeScreen">
      <template slot="title">
          <div class="custom_dialog_header">
            <span class="el_dialog_title"></span>
            <div class="custom_dialog_menu">
              <i :class="dialogScreen?'el-icon-news': 'el-icon-full-screen'" @click="dialogScreen=!dialogScreen"></i>
            </div>
          </div>
      </template>
      <confirmation @changeSure="changedia" :Send="SendData" :flag1="dialogVisible2" ></confirmation>
    </el-dialog>
    <el-dialog v-if="dialogVisible" :width="dialogScreen1?'': '1500px'" :visible.sync="dialogVisible" append-to-body :fullscreen="dialogScreen1" :class="[dialogScreen ? 'fullscreen' : 'no_fullscreen']" :beforeClose="changeTwoScreen">
      <template slot="title">
          <div class="custom_dialog_header">
            <span class="el_dialog_title"></span>
            <div class="custom_dialog_menu">
              <i :class="dialogScreen1?'el-icon-news': 'el-icon-full-screen'" @click="dialogScreen1=!dialogScreen1"></i>
            </div>
          </div>
      </template>
      <Settlement :Send="SendData" :flag2="dialogVisible" @changeTwo="changeUpload"></Settlement></el-dialog>
  </basic-container>
</template>

<script>
import Settlement from "../../components/orderDetail/Settlement.vue";
import confirmation from "../../components/orderDetail/confirmation.vue";
import { mapGetters } from 'vuex'
import { exportBlob } from "@/api/common";
import { getToken } from '@/util/auth';
import {getList,Fathremove} from "../../api/businessTwo/orderDetail"
export default {
  components: {
    Settlement,
    confirmation
  },
  mounted() {
   
  },
  data() {
    return {
      dialogScreen:false,
      dialogScreen4:false,
      unloadData:{
        orderId:"",
	orderNo:"",
	isUpdate:false,
  claimCompanyId:""
      },
      CheckData:{},
      dialogVisible:false,
      dialogVisible2:false,
      from: {},
      SendData:{},
      form1:{
      status:null,
       current:1,
       size:10
      },
      dialogScreen1:false,
      Size:10,
      newData: "",
      oldData: "",
      dialogVisible1: false,
      propsHttp: {
        url: 'url',
        name: 'name',
        res: 'data'
      },
      options: [
        {
          value: 0,
          label: '配送企业处理中'
        },
        {
          value: 1,
          label: '待医药机构确认'
        },
        {
          value: 2,
          label: '待医保局审核'
        },{
          value:3,
          label:'支付待确认'
        },{
          value:4,
          label:'待核实'
        },{
          value:5,
          label:'确认通过'
        }
      ],
      creatMaster: "",
      form: [],
      editForm: {},
   
      value1: [],
      page: {
        pageSize: 20
      },
      tableData: []
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.fn();
    this.today();
  },
  methods: {
    formatMonth(dateString) {
  const year = dateString.slice(0, 4);
  const month = dateString.slice(4);
  
  
  const formattedDate = `${year}年-${Number(month)}月`;
  return formattedDate;
},
    toSend(data){
       this.dialogVisible2=true
       this.SendData=data
    },
    Change(row){
      this.SendData=row
       this.dialogVisible=true
     
    },
    changeScreen(){

this.dialogScreen=false
this.dialogVisible2=false
this.fn()
    },
    changeTwoScreen(){

this.dialogScreen1=false
this.dialogVisible=false
    },
   search() {
      let arr=[]
      if (this.value1) {
        this.value1.map((v)=>{
      arr.push(this.format(v));
      console.log(this.format(v));
      this.form1.startTime=arr[0]
     this.form1.endTime=arr[1]
     }) 
      }else{
        this.form1.startTime=null
     this.form1.endTime=null
      }
      
    this.fn()
     
    },
    changeTo(data){
this.dialogVisible1=data
    },
    changedia(data){
this.dialogVisible2=data
this.dialogScreen=data
this.fn()
    },
    ChangeDetail(row,data){
      row.status=data
    this.SendData=row
    this.dialogVisible2=true
    },
    changeUpload(data){
this.dialogVisible=data
this.dialogScreen1=data
setTimeout(() => {
  this.fn()
}, 800);
    },
    async fn() {
      console.log(this.form1);
       let res = await getList(this.form1) 
     console.log(res);
    if (res.data.code == 200) {
       this.tableData=res.data.data.records
       this.Size=res.data.data.total
      
      console.log(this.tableData,res.data.data); 
    }
  },
    format(date) {
      const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
   const formattedDate =`${year}-${month}-${day}`;
return formattedDate;
},
    handleTemplate() {
      exportBlob(`/api/medpurBatch/download?${this.website.tokenHeader}=${getToken()}&templateName=${this.templateName}`).then((response) => {
        if (response.data.size > 0) {
          let url = window.URL.createObjectURL(response.data);
          let a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = this.templateName;
          a.click();
          window.URL.revokeObjectURL(url);
        } else {
          this.$message.warning('模板文件不存在!');
        }
      });
    },
    typec(a) {
      if (a.row.status == 0) {
        a.row.label = "配送企业处理中"
        return "info"
      } else if (a.row.status == 1) {
        a.row.label = "待医药机构确认"
        return "warning"
      } else if(a.row.status==2){
a.row.label="待医保局审核"
        return  "warning"
      } else if(a.row.status==3){
        a.row.label="支付待确认"
        return "warning"
      }else if(a.row.status==4){
a.row.label="待核实"
return "warning"
      }else if(a.row.status==5){
        a.row.label="确认通过"
return "success"
      }
    },
    check() {
      this.$router.push("/businessTwo/orderRefund")
    },
    jump() {
      this.dialogVisible1 = false
    },
    handleDelete(ids) {
      Fathremove(ids).then(() => {
              this.fn();
                this.$message.success('删除成功');
            });
    },
    
    today() {
      let data = new Date();
      let year = data.getFullYear()
      let month = data.getMonth() + 1;
      let day=data.getDate()
      let oldMonth = month - 2;
      this.newData = `${year}-${month}-${day}`;
      this.oldData = `${year}-${oldMonth}-${day}`;
      console.log(this.newData,this.oldData);
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  margin-right: 64px;
}

.df {
  display: flex;
}
.cell {
  text-align: center;

}
::v-deep .el-dialog__body{
  padding: 0 20px !important;
}
::v-deep .el-dialog {
  z-index: 9999;
}
.custom_dialog_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom_dialog_menu {
  padding: 0px 30px 0 0;
}
 
 .custom_dialog_menu i {
  color: #909399;
  font-size: 15px;
}
 
.el-icon-full-screen,.el-icon-news {
  cursor: pointer;
}
::v-deep .v-modal {
  z-index: 20;
}

.block {
  font-size: 14px;
}
.all{
  width: 100%;
  height: 746px;
}
::v-deep th.el-table__cell{
  background-color: #fafafa;
}
::v-deep .el-table__cell{
  border-right: 1px solid #EBEEF5 !important;
  text-align: center;
}
</style>